<template>
  <div class="leftCont">
    <div class="leftItem weather flex data-item">

      <el-carousel indicator-position="none" class="carousel" height="80%" :interval="5000" arrow="never">
        <el-carousel-item v-for="item,index in dateList" :key="index">
          <div class="flex carouselItem">
            <div class="leftDate flex">
              <div>
                {{item.date}}

              </div>
              <div>
                天气:{{item.weather}}
              </div>
            </div>
            <div class="rightDate flex">

              <div><span>气温:</span> <span></span>{{item.airTemperature}}</div>
              <div><span>风速:</span> <span></span>{{item.windSpeed}}</div>
              <div><span>穿衣指数:</span> <span></span>{{item.dressingIndex}}</div>
              <div><span>PM2.5:</span> <span></span>{{item.pm2p5}}</div>
              <div><span>空气质量:</span> <span></span>{{item.airQuality}}</div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>

      <div class="data-foot-line"></div>
    </div>
    <div class="leftItem data-foot data-item tableMy" style="margin-top: 20px">
            <el-table :cell-style=" { 'text-align': 'center','background':'revert' }"         :header-cell-style=" { 'text-align': 'center'}" :data='tableData' height="100%"      
          @mouseleave.native="autoScroll(false)" ref="scrollTable"         @mouseenter.native="autoScroll(true)">
                <el-table-column prop="eat" label="吃" />
                <el-table-column prop="live" label="住" />
                <el-table-column prop="play" label="玩" />
                <el-table-column prop="shopping" label="购" />
              </el-table>
      <div class="data-foot-line"></div>
         
    </div>

    <div class="leftItem data-foot data-item tableMy" style="margin-top: 20px">
      <el-table :cell-style=" { 'text-align': 'center','background':'revert' }" :header-cell-style=" { 'text-align': 'center'}" :data='activeData' height="100%"
        @mouseleave.native="autoScrolls(false)" ref="scrollTables" @mouseenter.native="autoScrolls(true)">
        <el-table-column prop="activiType" label="名称" />
        <el-table-column prop="activiCanter" label="活动" />
        <el-table-column label="时间">
          <template slot-scope="scope">
           {{scope.row.timeSlot.join('-')}}
        </template>

        </el-table-column>
      </el-table>
      <div class="data-foot-line"></div>
    </div>
  </div>
</template>
<script>
export default {

  data() {
    return {
      rowData:{},
      dateList: [
        {
          date: "2024-01-05",
          weather: "晴天",
          airTemperature: "2℃",
          windSpeed: "1m/s",
          dressingIndex: "2",
          pm2p5: "51",
          airQuality: "25/cm3",
        },
        {
          date: "2024-01-06",
          weather: "阴天",
          temp: "2℃",
          windSpeed: "1m/s",
          dressingIndex: "2",
          pm2p5: "51",
          airQuality: "25/cm3",
        },
        {
          date: "2024-01-07",
          weather: "多云",
          temp: "2℃",
          windSpeed: "1m/s",
          dressingIndex: "2",
          pm2p5: "51",
          airQuality: "25/cm3",
        },
        {
          date: "2024-01-08",
          weather: "小雪",
          temp: "2℃",
          windSpeed: "1m/s",
          dressingIndex: "2",
          pm2p52p5: "51",
          airQuality: "25/cm3",
        },
        {
          date: "2024-01-09",
          weather: "晴天",
          temp: "2℃",
          windSpeed: "1m/s",
          dressingIndex: "2",
          pm2p5: "51",
          airQuality: "25/cm3",
        },
        {
          date: "2024-01-10",
          weather: "晴天",
          temp: "2℃",
          windSpeed: "1m/s",
          dressingIndex: "2",
          pm2p5: "51",
          airQuality: "25/cm3",
        },
        {
          date: "2024-01-11",
          weather: "晴天",
          temp: "2℃",
          windSpeed: "5m/s",
          dressingIndexingIndex: "2",
          pm2p5: "54",
          airQuality: "25/cm3",
        },
        {
          date: "2024-01-12",
          weather: "晴天",
          temp: "6℃",
          windSpeed: "5m/s",
          dressingIndexingIndex: "5",
          pm2p5: "44",
          airQuality: "55/cm3",
        },
      ],
      activeData: [],
      tableData: [],
      scrollTop: 0,
      scrollTop1: 0,
      speed: 45,
    };
  },
  created() {},
  mounted() {
    this.getData();
    this.getWeather()
    this.autoScroll(false);
    this.autoScrolls(false);

  },
  beforeDestroy() {
    this.autoScroll(true);
    this.autoScrolls(true);
  },

  methods: {
    getData() {
      let parmas = { order: "desc", page: 1, rows: 30, sort: "id", wheres: [] };
      this.http
        .post("api/Kuaibao_large_screen_data/getPageData", parmas)
        .then((res) => {
          console.log(res.rows);
          if (res.rows.length != 0) {
            this.rowData = res.rows[0];
            this.activeData = JSON.parse(this.rowData.activity);
            let eatList = res.rows[0].eat.split("&,");
            let liveList = res.rows[0].live.split("&,");
            let playList = res.rows[0].play.split("&,");
            let shopList = res.rows[0].shopping.split("&,");
            console.log(eatList, liveList, playList, shopList);
            let max = Math.max(
              Math.max(eatList.length, liveList.length),
              Math.max(playList.length, shopList.length)
            );
            for (let i = 0; i < max; i++) {
              let obj = {
                eat: eatList[i] || '-',
                live: liveList[i] || '-',
                play: playList[i] || '-',
                shopping: shopList[i] || '-',
              };
              this.tableData.push(obj);
            }
        
          }
        });
    },
    // 天气
       
    getWeather() {
      let that = this;
      let url = "https://sr.boss.i-town.cn/kuaibao/weather/forecast";
      //第一步：创建需要的对象
      var httpRequest = new XMLHttpRequest();
      //第二步：打开连接 /***发送json格式文件必须设置请求头 ；如下 - */
      httpRequest.open("GET", url, true);
      //设置请求头 注：post方式必须设置请求头（在建立连接后设置请求头）
      httpRequest.setRequestHeader("Content-type", "application/json");
      const obj = {
        date: this.newDate,
      };
      httpRequest.send(JSON.stringify(obj)); //发送请求 将json写入send中sss
      httpRequest.onreadystatechange = function () {
        //请求后的回调接口，可将请求成功后要执行的程序写在其中
        if (httpRequest.status === 200) {
          //验证请求是否发送成功
          var json = JSON.parse(httpRequest.responseText); //获取到服务端返回的数据
          if (json.weatherForecastArrayList.length != 0) {
         that.dateList=json.weatherForecastArrayList.map((v)=>{
          return {
              airQuality: v.airQuality || '-',
              pm2p5: v.pm2p5 ||'-',
              dressingIndex: v.dressingIndex || '-',
              windSpeed: v.windSpeed || '-',
              airTemperature: v.airTemperature || '-',
              weather: v.weather || '-' 
            }
          });
          }
        }
      };
    },  
   
    autoScroll(stop) {
      const table = this.$refs.scrollTable;
      // 拿到表格中承载数据的div元素
      const divData = table.$refs.bodyWrapper;
      // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
      if (stop) {
        //再通过事件监听，监听到 组件销毁 后，再执行关闭计时器。
        window.clearInterval(this.scrolltimer);
      } else {
        this.scrolltimer = window.setInterval(() => {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1;
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (
            divData.clientHeight + divData.scrollTop + 0.5 >=
            divData.scrollHeight
          ) {
            // 重置table距离顶部距离
            divData.scrollTop = 0;
          }
        }, 150); // 滚动速度
      }
    },
    autoScrolls(stop) {
      const table = this.$refs.scrollTables;
      // 拿到表格中承载数据的div元素
      const divData = table.$refs.bodyWrapper;
      // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
      if (stop) {
        //再通过事件监听，监听到 组件销毁 后，再执行关闭计时器。
        window.clearInterval(this.scrolltimer);
      } else {
        this.scrolltimer = window.setInterval(() => {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1;
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (
            divData.clientHeight + divData.scrollTop + 0.5 >=
            divData.scrollHeight
          ) {
            // 重置table距离顶部距离
            divData.scrollTop = 0;
          }
        }, 100); // 滚动速度
      }
    },
  },
};
</script>
<style scoped lang="less">
.leftCont {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  .leftItem {
    width: 100%;
    height: 31%;
    color: #43a3fb;
    background: rgba(255, 255, 255, 0.04);
    position: relative;
  }
  .tableMy {
    /deep/ .el-table::before {
      height: 0;
    }
    /*最外层透明*/
    /deep/ .el-table,
    /deep/ .el-table__expanded-cell {
      background-color: transparent;
      color: #43a3fb;
    }
    // /deep/ .el-table__row :hover {
    //   background-color: rgba(255, 255, 255, 0.04);
    // }
    /* 表格内背景颜色 */
    /deep/ .el-table th,
    /deep/ .el-table tr,
    /deep/ .el-table td {
      background-color: transparent;
      border-bottom: none;
    }
    /deep/ .el-table__body-wrapper::-webkit-scrollbar {
      width: 0;
    }
  }
  .flex {
    display: flex;
    justify-content: center;
  }
  .weather {
    align-items: center;
  }
  .leftDate {
    width: 42%;
    height: 90%;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    div {
      width: 100%;
      height: 48%;
    }
  }
  .rightDate {
    width: 42%;
    height: 90%;
    height: 90%;
    margin-left: 20px;
    flex-direction: column;
    justify-content: space-between;
    div {
      display: flex;
      justify-content: space-between;
    }
  }
  .carousel {
    width: 98%;
    height: 98%;
    overflow: hidden;
    .carouselItem {
      width: 100%;
      height: 90%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .acties {
    width: 30%;
    display: flex;
    justify-content: center;
  }
  .flex {
    display: flex;
    justify-content: center;
  }
  .weather {
    align-items: center;
  }
  .leftDate {
    width: 42%;
    height: 90%;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    div {
      width: 100%;
      height: 48%;
    }
  }
  .rightDate {
    width: 42%;
    height: 90%;
    height: 90%;
    margin-left: 20px;
    flex-direction: column;
    justify-content: space-between;
    div {
      display: flex;
      justify-content: space-between;
    }
  }
  .carousel {
    width: 98%;
    height: 98%;
    overflow: hidden;
    .carouselItem {
      width: 100%;
      height: 100%;
    }
  }
  .acties {
    width: 30%;
    display: flex;
    justify-content: center;
  }
}
</style>